<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
          margin: 0px;
        }
      
        .div1 {
          position: absolute;
          width: 200px;
          height: 200px;
          top: 50px;
          left: 10px;
          background: red;
          display: none;
        }
    </style>
    <script type="text/javascript" src="../../jQuery-JS/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        /*
        需求：
        1.点击btn1，瞬间显示
        2.点击btn2，慢慢显示
        3.点击btn3,瞬间隐藏
        4.点击btn4，慢慢隐藏
        5.点击btn5，切换显示/隐藏
        */
        $(function(){
            var $div_div1=$("div.div1");
            //1.点击btn1，瞬间显示
            var $button_btn1=$(":button#btn1");
            $button_btn1.click(function(){
                $div_div1.show();
            })

            //2.点击btn2，慢慢显示
            var $button_btn2=$(":button#btn2");
            $button_btn2.click(function(){
                $div_div1.show(1000);
            })

            //3.点击btn3瞬间隐藏
            var $button_btn3=$(":button#btn3");
            $button_btn3.click(function(){
                $div_div1.hide();
            })

            //4.点击btn4，慢慢隐藏
            var $button_btn4=$(":button#btn4");
            $button_btn4.click(function(){
                $div_div1.hide(1000);
            })

            //5.点击btn5，切换显示/隐藏
            var $button_btn5=$(":button#btn5");
            $button_btn5.click(function(){
                $div_div1.toggle(1000);
            })
        })
    </script>
</head>
<body>
    <button id="btn1">瞬间显示</button>
    <button id="btn2">慢慢显示</button>
    <button id="btn3">瞬间隐藏</button>
    <button id="btn4">慢慢隐藏</button>
    <button id="btn5">切换显示/隐藏</button>

    <div class="div1"></div>

    <!--
        显示隐藏，默认没有动画
        1.show()：（不）带动画的显示
        2.hide():（不）带动画的隐藏
        3.toggle():（不）带动画的切换显示/隐藏
    -->
</body>
</html>